<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>题目库</title>
  <link rel="icon" href="image/网页图标.png" type="image/x-icon">

  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
  <script src="js/top.js"></script>

  <style>
    *{
      padding: 0;
      margin: 0;
    }
    html, body, #app {
      width: 100%;
      height: 100%;
      font-size: 14px;
    }
    .el-container{
      width: 100%;
      height: 100%;
    }
    .el-header{
      width: 100%;
      padding: 0%;
    }

    /* 卡片 */
    .c1{
      width: 100%;
      height: 100%;
      font-size: 35px;
    }

    /* 弹出 */
    .d1{
      width: 200px;
      height: 400px;
      position: absolute;
      z-index: 100;
      left: 10%;
    }

    /* 浮动 */
    .f{
      float: left;
    }

    .i1{
      position: relative;
      top: -15px;
    }

    .p1{
      margin: 8px 10px 0 10px;
      text-decoration: none;
      color: #333333;
    }
    .user{
        float: right;
        position: relative;
        left: -40px;
        top: 15px;
    }
    .top1{
      width: 100%;
      height: 10%;
        font-size: 20px;
      background-color: #DCDFE6;
    }
    .t1{
        width: 20%;
        height: 100%;
        margin-left: 40px;
        margin-right: 50px;
        display: flex;
        align-items: center; /* 垂直居中 */
    }
    .t1 > p{
        margin-right: 6px;
    }
    .t2{
        width: 60%;
        height: 100%;
        display: flex;
        align-items: center; /* 垂直居中 */
    }
    .t21{
        margin-left: 10%;
    }
    .t22{
        margin-left: 20%;
        display: flex;
        align-items: center; /* 可选，用于垂直居中 */
    }
    .t3{
        width: 10%;
        height: 100%;
        float: right;
        display: flex;
        align-items: center; /* 垂直居中 */
    }
    .down1{
      width: 100%;
      height: 120%;
    }
    .o1{
        position: relative;
        left: 20px;
        top: 20px;
    }
  </style>

</head>
<body>

<div id="app">
  <el-container>
    <!-- 头部 -->
    <el-header height="12%">
      <top></top>
    </el-header>
    <!-- 身体 -->
    <el-main>
<!--      头部- 类别名，总题/已刷题/未刷题数量，分类，搜索，开始刷题-->
      <div class="top1">
        <div class="t1 f"><p class="f">总题数：{{questionNum.all}}</p>
            <p class="f">已刷题：{{questionNum.do}}</p>
            <p class="f">未刷题：{{questionNum.all - questionNum.do}}</p>
        </div>
<!--          分类、搜索-->
          <div class="t2 f">
              <div class="t21 f">
                  <el-select v-model="search.type" placeholder="请选择">
                      <el-option value="全部">全部</el-option>
                      <el-option value="已刷题">已刷题</el-option>
                      <el-option value="未刷题">未刷题</el-option>
                  </el-select>
              </div>

              <div class="t22 f">
                  <el-input v-model="search.input" placeholder="请输入内容"></el-input>
                  <el-button type="primary" plain @click="getdata">搜索</el-button>
              </div>
          </div>
<!--          开始刷题-->
          <div class="t3 f">
              <el-button type="primary" @click="go">开始刷题</el-button>
          </div>
      </div>
<!--      无限滚轮显示题目-->
      <div class="down1">
          <el-card infinite-scroll-delay="500" v-infinite-scroll="queryNext">
              <div v-for="q in questionPage.records" class="flex" @click="open(q)">
                  <div>
                      <el-tag>{{q.type}}</el-tag>
                      <span v-if="q.content.length>100">{{q.content.substring(0,100)}}...</span>
                      <span v-else>{{q.content}}</span>
                  </div>
              </div>
          </el-card>
      </div>
    </el-main>
  </el-container>

<!--    弹窗-->
    <!--    选择随机题目弹框-->
    <el-dialog title="题目详情" :visible.sync="qus">
<!--        题目显示-->
        <div v-if="one.type == '填空题'">
            {{one.content}}
        </div>
        <div v-if="one.type == '单选题' || one.type == '多选题'">
            {{one.content}}
            <ol type="A" class="o1">
                <li v-for="a in one.items.split(';')"><input type="checkbox" disabled>{{a.replace(/^\$/, '')}}</li>
            </ol>
        </div>
        <div v-if="one.type == '判断题'">
            {{one.content}}
            <ol type="A" class="o1">
                <li><input type="checkbox" disabled>对</li>
                <li><input type="checkbox" disabled>错</li>
            </ol>
        </div>
        <div v-if="one.type == '问答题'">
            {{one.content}}
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="qus = false">取 消</el-button>
        </div>
    </el-dialog>
</div>

<script>
  let app = new Vue({
    el: '#app',
    data: {
        search:{type: '全部', input: ''},
        questionNum:{all:0,do:0},    //获取数量
        questionPage: {current:1, size:20, records:[]},
        qus: false,
        one: {},
        status: true
    },
    created() {
        //查询题目
        this.query();
        //获取数量
        this.questionNuml();
    },
    methods: {
        //获取数量
        questionNuml(){
            var params = new URLSearchParams(window.location.search);
            var jwt = sessionStorage.getItem("jwt");
            axios.get("cloud-other/question/questionNum",{
                params:{
                    id: params.get("id")
                },
                headers:{
                    Authorization: jwt
                }
            }).then(res=>{
                this.questionNum = res.data.data;
                if(this.questionNum.all == 0){
                    this.status = false;
                }
            })
        },
        //多条件查询获取题目
        query(){
            var params = new URLSearchParams(window.location.search);
            var jwt = sessionStorage.getItem("jwt");
            axios.get("cloud-other/question/queryQuestion",{
                params:{
                    page: this.questionPage.current,
                    size: this.questionPage.size,
                    type: this.search.type,
                    input: this.search.input,
                    id: params.get("id")
                },
                headers:{
                    Authorization: jwt
                }
            }).then(res=>{
                if(this.questionPage.current == 1){
                    this.questionPage = res.data.data;
                }else{
                    let oldRecords = this.questionPage.records;
                    this.questionPage = res.data.data;
                    oldRecords = oldRecords.concat(this.questionPage.records);
                    this.questionPage.records = oldRecords;
                }
            })
        },
        queryNext(){
            if(this.questionPage.pages && this.questionPage.current < this.questionPage.pages){
                this.questionPage.current++;
                this.query();
            }
        },
        //搜索
        getdata(){
            var params = new URLSearchParams(window.location.search);
            var jwt = sessionStorage.getItem("jwt");
            axios.get("cloud-other/question/queryQuestion",{
                params:{
                    page: 1,
                    size: this.questionPage.size,
                    type: this.search.type,
                    input: this.search.input,
                    id: params.get("id")
                },
                headers:{
                    Authorization: jwt
                }
            }).then(res=>{
                this.questionPage = res.data.data;
            })
        },
        open(obj){
            this.qus = true;
            this.one = obj;
        },
        //开始刷题
        go(){
            if(!this.status){
                this.$alert("没有题目，抱歉");
                return;
            }
            var params = new URLSearchParams(window.location.search);
            location.href = "doquestion.html?id=" + params.get("id");
        }
    }
  });
</script>

</body>
</html>